<template>
  <div class="todayPage">
    <div class="head">
      <div>
        <dv-decoration-11 style="width: 200px; height: 50px; color: #f4f162"
          >今日入仓：20件</dv-decoration-11
        >
      </div>
      <div>
        <dv-decoration-11 style="width: 200px; height: 50px; color: #f4f162"
          >今日在仓：20件</dv-decoration-11
        >
      </div>
    </div>
    <div class="head">
      <div>
        <dv-decoration-11 style="width: 200px; height: 50px; color: #f4f162"
          >今日借用：20件</dv-decoration-11
        >
      </div>
      <div>
        <dv-decoration-11 style="width: 200px; height: 50px; color: #f4f162"
          >今日归还：20件</dv-decoration-11
        >
      </div>
    </div>
    <div style="margin-top: 10px">
      <dv-decoration-7 style="width: 200px; height: 30px; color: #f4f162"
        >目前剩余货架数</dv-decoration-7
      >
      <dv-capsule-chart :config="config" style="width: 100%; height: 130px" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    // 原始数据
    const rawData = [
      { name: "第一列", value: 20 },
      { name: "第二列", value: 47},
      { name: "第三列", value: 80 },
    ];

    // 动态计算颜色
    const processedData = rawData.map(item => ({
      ...item,
      color: this.getColor(item.value) // 根据值获取颜色
    }));

    return {
      config: {
        data: processedData,
        showValue: true,
        unit: "个",
        colors: processedData.map(item => item.color) // 传递颜色数组
      }
    };
  },
  methods: {
    // 颜色计算逻辑
    getColor(value) {
      if (value > 70) return "#00ff00"; // 绿色
      if (value >= 30) return "#ffff00"; // 黄色
      return "#ff0000"; // 红色
    }
  }
};
</script>
<style scoped>
.todayPage {
  width: 100%;
  height: 100%;
  /* padding: 20px; */
}
.head {
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
}
</style>
